<div class="fixbar">
  <div
    class="wrapper dark-bg dark-border-color dark-action-hover"
    nz-dropdown
    [nzDropdownMenu]="menu"
    nzPlacement="topLeft"
  >
    <img src="assets/img/theme.svg" />
  </div>
  <nz-dropdown-menu #menu="nzDropdownMenu">
    <ul nz-menu nzSelectable>
      <li
        nz-menu-item
        *ngFor="let themeItem of themeList"
        (click)="toggleTheme(themeItem)"
      >
        {{ themeItem.name }}
      </li>
    </ul>
  </nz-dropdown-menu>

  <span *ngIf="isLogin" nz-tooltip [nzTooltipTitle]="$t('_syncData')">
    <div
      class="wrapper dark-bg dark-border-color dark-action-hover"
      (click)="handleSync()"
      [class.rotate]="syncLoading"
    >
      <i class="iconfont iconwinfo-icon-tongbu"></i>
    </div>
  </span>

  <span *ngIf="isLogin" nz-tooltip [nzTooltipTitle]="$t('_addData')">
    <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="goSystemPage()">
      <i class="iconfont iconchuangjian"></i>
    </div>
  </span>
  
  <span *ngIf="showCollapse" nz-tooltip [nzTooltipTitle]="collapsed ? $t('_collapse') : $t('_put')">
    <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="collapse()">
      <i class="iconfont iconweibiaoti25 collapse" [class.active]="collapsed"></i>
    </div>
  </span>

  <span nz-tooltip [nzTooltipTitle]="isDark ? $t('_closeDark') : $t('_openDark')">
    <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="toggleMode()">
      <i class="iconfont icondark dark" *ngIf="!isDark"></i>
      <img class="iconfont icondark" src="assets/img/light.svg" *ngIf="isDark">
    </div>
  </span>

  <div *ngIf="settings.mirrorList.length > 0">
    <div
      class="wrapper dark-bg dark-border-color dark-action-hover"
      nz-dropdown
      [nzDropdownMenu]="menuMirror"
      nzPlacement="topRight"
    >
      <img src="assets/img/mirror.svg" />
    </div>
    <nz-dropdown-menu #menuMirror="nzDropdownMenu">
      <ul nz-menu nzSelectable>
        <li
          nz-menu-item
          *ngFor="let item of settings.mirrorList"
        >
          <a [href]="item.url">
            {{ item.name }}
          </a>
        </li>
      </ul>
    </nz-dropdown-menu>
  </div>

  <span *ngIf="settings.showLanguage">
    <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="toggleLocale()">
      <img class="iconfont" src="assets/img/china.svg" *ngIf="language === 'zh-CN'">
      <img class="iconfont" src="assets/img/ua.svg" *ngIf="!language || language === 'en'">
    </div>
  </span>
  
  <div class="wrapper dark-bg dark-border-color dark-action-hover" (click)="goTop()">
    <i class="iconfont iconjiantouarrow483 arrow"></i>
  </div>
</div>
